<template>
	<view>
		<view class="airdrop_wrapper">
			<!-- 空投页面 -->
			<view class="airdrop_wrapper_header">
				<view class="airdrop_wrapper_header_text">空投币量（PCD）</view>
				<view class="airdrop_wrapper_text">{{this.$util.roundNumber2(data.get_amount,2)}}</view>
				<view class="airdrop_wrapper_total_currency">累计总空投币量 (PCD) :{{this.$util.roundNumber2(data.total_amount,2)}}</view>
				<view class="airdrop_wrapper_notice">
					<view class="airdrop_wrapper_notice_children">
						<view class="airdrop_wrapper_notice_header">
							<view>{{data.show_rule?data.rule:"释放币"}}</view>
						</view>
						<view class="airdrop_wrapper_notice_footer">
							<view>{{this.$util.roundNumber2(data.get_log,2)}}PCD</view>
							<text @click="onInvestmentDialog">转入可提</text>
						</view>
					</view>
				</view>
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/wallet/airdropBanner.png"></image>
			</view>

			<view class="airdrop_wrapper_lists">
				<view class="airdrop_wrapper_history">转入可提历史记录</view>
				<!-- 下面的是循环 -->
				<view class="airdrop_wrapper_item" v-for="(item,index) in lists" :key="index">
					<view class="airdrop_wrapper_item_header">
						<view class="airdrop_wrapper_item_header_tetx">
							<view>
								<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/qianbao.svg" class="airdrop_wrapper_item_header_tetx_image"></image>
							</view>
							<text>数额</text>
						</view>
						<view class="airdrop_wrapper_item_header_pcd">{{$util.roundNumber2(item.get_amount,2)}}PCD</view>
					</view>
					<view class="airdrop_wrapper_item_footer">
						<view class="airdrop_wrapper_item_father">
							<view class="airdrop_wrapper_item_time">
								<view class="airdrop_wrapper_item_header_tetx">
									<view>
										<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/date.svg"></image>
									</view>
									<text>提交时间</text>
								</view>
								<view class="airdrop_wrapper_item_header_pcd">{{$util.FormatDate(item.create_time,"date")}}</view>
							</view>
							<view class="airdrop_wrapper_item_state">
								<view class="airdrop_wrapper_item_header_tetx">
									<view>
										<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/zhuangtai.svg"></image>
									</view>
									<text>状态</text>
								</view>
								<view class="airdrop_wrapper_item_header_pcd">{{item.status==1?"已入账可提资产":""}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 上拉加载组件 -->
				<uLi-load-more :status="loadingType" :contentText="contentText"></uLi-load-more>
			</view>
		</view>
		<!-- 弹出框 -->
		<wx-dialog :showDialog="showAirdropDialog" direction="center" @onHideDialog="HideDialog()">
			<template v-slot:dialogContent>
				<view class="dialog_wrap_airdrop">
					<view class="dialog_wrap_airdrop_number">
						<view>数额</view>
						<navigator url="/pages/mine/mineProfit" open-type="navigate" hover-class="other-navigator-hover" v-show="data.show_rule">
							<text @click="onJumpDialogue">查看空投规则</text>
						</navigator>
					</view>
					<view class="dialog_wrap_airdrop_from">
						<input type="number" placeholder="请输入数额" v-model="whole">
						<view class="dialog_wrap_airdrop_from_border" @click="onTextValue">
							<text>PCD</text>
							<text>|</text>
							<text>全部</text>
						</view>
					</view>
					<view class="dialog_wrap_airdrop_pcd" v-show="data.show_rule">当日转入可提最高限额 {{$util.roundNumber2(amount,2)}} PCD</view>
					<!-- <view class="dialog_title">温馨提示</view> -->
					<!-- <view class="dialog_content">
						<text>该功能正在完善测试中，将很快对外开放，敬请期待</text>
					</view> -->
					<view class="dialog_wrap_airdrop_btn">
						<text type="warn" class="dialog_btn" @click="onAirdropDialogBtn">转入可提</text>
					</view>
				</view>
			</template>
		</wx-dialog>


	</view>
</template>
<script>
	import wxDialog from "@/components/wx-dialog/wx-dialog.vue";
	import uLiLoadMore from "@/components/uLi-load-more/uLi-load-more"
	export default {
		onReachBottom() { //上拉加载
			if (this.generalPage <= this.page) { //判断请求的页数是否超过总页数
				// this.page = this.generalPage;
				this.loadingType = "contentnomore"
				return
			};
			this.page++
			this.getList()
		},
		components: {
			wxDialog,
			uLiLoadMore
		},
		data() {
			return {
				whole: "", //文本输入框的双向数据绑定
				showAirdropDialog: false,
				// 请求第几页
				page: 1,
				// 请求第几行
				limit: 9,
				lists: [], //循环列表
				data: {},
				loadingType: "contentdown", //当前下拉刷新的状态
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				generalPage: 0,
				amount: "", //获取可提币数量
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.lists = []
			this.getList();
		},
		//页面加载完毕调用函数
		onLoad() {
			// this.getNorm()
			this.getList(); //获取列表数据
			this.getNorm() //获取空投可转入数据
		},
		methods: {
			// 点击对话框
			onInvestmentDialog() {
				this.showAirdropDialog = true;
			},
			//点击关闭对话框
			HideDialog() {
				this.whole = ''
				this.showAirdropDialog = false;
			},
			// 点击对话框
			onAirdropDialogBtn() {
				// var num="^[0-9]*[1-9][0-9]*$"
				if (this.whole == '') {
					uni.showToast({
						title: "请输入PCD数量",
						icon: "none",
						duration: 2000
					});
					return
				} else if (this.whole <= 0) {
					uni.showToast({
						title: "请输入大于0数额",
						icon: "none",
						duration: 2000
					});
					return
				} else if (!(/(^[1-9]\d*$)/.test(this.whole))) {
					uni.showToast({
						title: "请输入整数",
						icon: "none",
						duration: 2000
					});
					return
				}
				this.$api.getOut({
					number: this.whole
				}, res => {
					// console.log(res)
					if (res.type == 'ok') {
						uni.showToast({
							title: '转入成功',
							icon: "none",
							duration: 2000
						});
						this.whole = ''
						this.showAirdropDialog = false;
						// uni.hideToast();
						// 转入成功刷新页面
						this.page = 1;
						this.lists = []
						this.getList();
					} else {
						// console.log()
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
						this.whole = ''
						this.showAirdropDialog = false;
						return
					}
				})
			},
			// 点击对话框
			onJumpDialogue() {
				this.showAirdropDialog = false;
			},
			getList() {
				this.loadingType = "contentrefresh"
				this.$api.getOutList({
					limit: this.limit,
					page: this.page
				}, res => {
					// console.log(res)
					if (res.data.type == "ok") {
						uni.stopPullDownRefresh(); //关闭下拉刷新
						// console.log(res)
						this.data = res.data.message;
						this.lists = [...this.lists, ...res.data.message.data];
						this.generalPage = Math.ceil(res.data.message.count / this.limit);
						if (this.generalPage <= this.page) { //判断请求的页数是否超过总页数
							this.page = this.generalPage;
							this.loadingType = "contentnomore"
							return
						};
					} else {
						this.loadingType = "contentdown"
					}
				})
			},
			// 获取提币上限数据
			getNorm() {
				this.$api.getOutNorm({}, res => {
					// console.log(res)
					if (res.data.type == "ok") {
						// alert(1)
						// console.log(res.data.message.get_amount)
						this.amount = res.data.message.get_amount
					}
				})
			},
			onTextValue() {
				this.whole = this.amount.toString()
			}
		},
	}
</script>
<style lang="scss" scoped>
	.airdrop_wrapper {
		height: 100vh;
		view {
			box-sizing: border-box;
		}
		.airdrop_wrapper_header {
			position: relative;
			height: 330upx;
			width: 100%;
			// padding-left: 44upx;
			// background: url("../../static/img/user/banner.png") no-repeat;
			background: #20213B;
			// background-size: 100% 100%;
			// padding-top:1upx solid transparent;
			padding-top: 60upx;
			.airdrop_wrapper_total_currency {
				position: relative;
				z-index: 7;
				margin-left: 44upx;
				color: #FFFFFF;
				font-size: 12px;
				margin-top: 5upx;
			}
			.airdrop_wrapper_header_text {
				margin-left: 44upx;
				color: rgba(255, 255, 255, 1);
			}
			.airdrop_wrapper_text {
				margin-bottom: 15upx;
				font-size: 30px;
				margin-left: 44upx;
				color: rgba(255, 255, 255, 1);
				//    font-weight: 800;
			}
			.airdrop_wrapper_notice {
				position: absolute;
				bottom: -122upx;
				left: 0;
				height: 186upx;
				width: 100%;
				// background-color: #000;
				padding: 0 30upx;
				// transform: translateY(-64upx);
				.airdrop_wrapper_notice_children {
					position: relative;
					background-color: #FFFFFF;
					padding: 0 30upx;
					border-radius: 10upx;
					z-index: 6;
					.airdrop_wrapper_notice_header {
						display: flex;
						//  justify-content: center;
						align-items: center;
						position: relative;
						height: 80upx;

						view {
							color: #333333;
						}
					}
					// 1像素边框
					.airdrop_wrapper_notice_header:after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						border-top: 1px solid rgba(0, 0, 0, 0.1);
						-webkit-transform: scaleY(.5);
						-webkit-transform-origin: 0 0;
					}
					.airdrop_wrapper_notice_footer {
						position: relative;
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 106upx;
						view {
							color: #333333;
							font-weight: 700;
						}
						text {
							box-sizing: content-box;
							height: 38upx;
							background: #E13E4D;
							color: #fff;
							border-radius: 30upx;
							padding: 8upx 32upx;
							font-size: 10px;
							line-height: 38upx;
							font-weight: 700;
						}
					}
				}
			}
			image {
				position: absolute;
				top: 42upx;
				right: 0;
				width: 479upx;
				height: 290upx;
				z-index: 1;
			}
		}
		.airdrop_wrapper_lists {
			// margin-top: -64upx;
			padding: 1upx 29upx;
			// height: 2000upx;
			background-color: #F6F6F6;

			.airdrop_wrapper_history {
				margin: 154upx 0 32upx 0;
				font-weight: 500;
				color: #333333;
				font-size: 13px;
			}
			.airdrop_wrapper_item {
				background: #fff;
				height: 249upx;
				border-radius: 10upx;
				margin-bottom: 22upx;
				.airdrop_wrapper_item_header {
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 79upx;
					padding: 0 30upx;
					.airdrop_wrapper_item_header_pcd {
						color: #E03E4D;
						font-size: 13px;
					}
				}
				.airdrop_wrapper_item_header_tetx {
					display: flex;
					color: #666666;
					font-size: 13px;
					view {
						width: 29upx;
						height: 30upx;
						margin-right: 22upx;
					}
					image {
						width: 100%;
						height: 100%;
						//   display: block;

						vertical-align: top;
					}
					.airdrop_wrapper_item_header_tetx_image {
						transform: translateY(-2upx)
					}
				}
				.airdrop_wrapper_item_header:after {
					content: "";
					position: absolute;
					bottom: -1px;
					left: 0;
					right: 0;
					border-top: 1px solid rgba(0, 0, 0, 0.1);
					-webkit-transform: scaleY(.5);
					-webkit-transform-origin: 0 0;
				}
				.airdrop_wrapper_item_footer {
					display: flex;
					align-items: center;
					// flex-direction: column;
					// justify-content: space-between;
					// align-items: baseline;
					height: 169upx;
					padding: 0 30upx;
					.airdrop_wrapper_item_father {
						width: 100%;

						.airdrop_wrapper_item_header_pcd {
							color: #999999;
							font-size: 11px;
						}
					}
					.airdrop_wrapper_item_time {
						display: flex;
						justify-content: space-between;
						width: 100%;
						margin-bottom: 32upx;
					}
					.airdrop_wrapper_item_state {
						display: flex;
						justify-content: space-between;
						width: 100%;
					}
				}
			}
		}
	}
	.dialog_wrap_airdrop {
		position: relative;
		// z-index: 555;
		width: 90%;
		// height: 400upx;
		margin: 0 auto;
		padding: 1upx 30upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 20upx 20upx 20upx 20upx;
		.dialog_wrap_airdrop_number {
			display: flex;
			justify-content: space-between;
			margin-top: 60upx;
			margin-bottom: 15upx;
			view {
				color: #666666;
				font-size: 13px;
			}
			text {
				position: relative;
				color: #E03E4D;
				border-bottom: 1px solid #E03E4D;
			}
		}
		.dialog_wrap_airdrop_from {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 65upx;
			text {
				color: #333333;
				font-size: 12px;
			}
			input {
				width: 75%;
			}
			text:nth-child(2) {
				margin: 0 10upx;
			}
			input {
				.uni-input-placeholder {
					color: #E3E3E3;
				}
			}
		}

		.dialog_wrap_airdrop_from:after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			border-top: 1px solid rgba(51, 51, 51, 0.1);
			-webkit-transform: scaleY(.5);
			-webkit-transform-origin: 0 0;
		}
		.dialog_wrap_airdrop_pcd {
			margin-top: 21upx;
			color: #666666;
			font-size: 11px;
		}
		.dialog_wrap_airdrop_btn {
			height: 70upx;
			margin: 46upx 0 56upx 0;
			font-size: 14px;
			color: #FFFFFF;
			display: flex;
			width: 100%;
			.dialog_btn {
				height: 70upx;
				display: inline-block;
				width: 100%;
				background-color: #E13E4D;
				border-radius: 40upx;
				text-align: center;
				line-height: 70upx;
			}
			:nth-child(1) {
				margin-right: 10upx;
			}
		}
	}
</style>
